// 背景图填充类型扩展
export const backgroundImageExtendStyle = (backgroundImage, mode = 'repeat') => {
  if (!backgroundImage) {
    return;
  }
  let extendStyle = {
    backgroundImage: `url(${backgroundImage})`,
  };
  switch (mode) {
    case 'repeat': {
      extendStyle = {
        ...extendStyle,
        backgroundRepeat: 'repeat',
      };
      break;
    }
    case 'cover': {
      extendStyle = {
        ...extendStyle,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      };
      break;
    }
    case 'full': {
      extendStyle = {
        ...extendStyle,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      };
      break;
    }
  }
  return extendStyle;
};

// 字符串类型样式拼接扩展
export const stringExtendStyle = (array) => {
  let rs = [];
  array.forEach(item => {
    switch (item.key) {
      case 'scale': {
        item.val && rs.push(`scale(${item.val})`);
        break;
      }
      case 'rotate': {
        item.val && rs.push(`rotate(${item.val}deg)`);
        break;
      }
      case 'rotateX':
      case 'rotateY': {
        item.val && rs.push(`${item.key}(${item.val}deg)`);
        break;
      }
      case 'skew': {
        item.val && rs.push(`${item.key}(${item.val}deg)`);
        break;
      }
      case 'skewX': {
        item.val && rs.push(`${item.key}(${item.val}deg)`);
        break;
      }
      case 'skewY': {
        item.val && rs.push(`${item.key}(${item.val}deg)`);
        break;
      }
      case 'scaleX': {
        item.val && rs.push(`${item.key}(${item.val / 100})`);
        break;
      }
      case 'scaleY': {
        item.val && rs.push(`${item.key}(${item.val / 100})`);
        break;
      }
      case 'translate':
      case 'translateX':
      case 'translateY': {
        item.val && rs.push(`${item.key}(${item.val}px)`);
        break;
      }
      case 'blur': {
        item.val && rs.push(`blur(${item.val}px)`);
        break;
      }
      case 'brightness': {
        item.val && rs.push(`brightness(${item.val}%)`);
        break;
      }
      case 'contrast': {
        item.val && rs.push(`contrast(${item.val}%)`);
        break;
      }
      case 'saturate': {
        item.val && rs.push(`saturate(${item.val}%)`);
        break;
      }
      case 'grayscale': {
        item.val && rs.push(`grayscale(${item.val}%)`);
        break;
      }
      case 'sepia': {
        item.val && rs.push(`sepia(${item.val}%)`);
        break;
      }
      case 'hueRotate': {
        rs.push(`hue-rotate(${item.val}deg)`);
        break;
      }
      case 'invert': {
        rs.push(`invert(${item.val}%)`);
        break;
      }
    }
  });
  return rs.join(' ');
};
